<template>
    <div class="register">
        <p>首次使用请点击左下角“注册账号”</p>
        <div><van-field v-model="info.phone" placeholder="请输入手机号" /></div>
        <div><van-field v-model="info.password" placeholder="请输入密码" /></div>

        <!-- <div class="codeBox"> -->
        <!-- <van-field v-model="code" placeholder="请输入验证码" /> -->
        <!-- <h2>发送验证码</h2> -->
        <!-- <h2 v-if="!counting" @click="sendVerificationCode">发送验证码</h2> -->
        <!-- <h2 v-else :disabled="counting">重新发送({{ count }}s)</h2> -->
        <!-- </div> -->
        <div class="registerButton" @click="register()">注册</div>
        <div @click="getLogin">账号登录</div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter, RouterView } from 'vue-router'
import axios from 'axios'
import { registerApi } from "../api/index.js";


onMounted(() => {
});
const info = ref({
    phone: '17858252091',
    password: '252091'
});
const code = ref('');
const router = useRouter()
const getLogin = () => {
    router.push({ name: 'login' })
}
async function register() {
    try {
        let obj = {
            phone: info.value.phone,
            password: info.value.password
        }
        let res = await registerApi(obj)
        console.log(res);
        router.push({ name: 'login' })
    } catch (err) {
        console.log(err);
    }
}

let counting = ref(false);
let count = ref(60)
function sendVerificationCode() {
    // 在这里编写发送验证码的逻辑，例如调用API等
    // 假设发送成功后开始倒计时
    counting.value = true;
    const timer = setInterval(() => {
        count.value--;
        if (count.value === 0) {
            clearInterval(timer);
            count.valueing = false;
            count.value = 60; // 重置倒计时
        }
    }, 1000);
}
</script>

<style scoped lang="less">
.register {
    width: 100vw;
    height: 100vh;
    background: #fff;
    padding: 20px;

    p {
        padding: 50px 0;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #000000;
        text-align: center;
        font-style: normal;
        text-transform: none;
    }

    .codeBox {
        position: relative;

        h2 {
            position: absolute;
            right: 10px;
            top: 10px;
            height: 19px;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #1A5FDC;
            text-align: center;
            font-style: normal;
            text-transform: none;
        }
    }

    .registerButton {
        margin: 20px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
        background: #407FF1;
        border-radius: 6px 6px 6px 6px;
        color: #fff;
    }
}
</style>